<script setup>
import { useRouter } from "vue-router"; // 导入路由
import { artGetDownload } from "@/api/download.js";
import { ref, onMounted } from "vue";
// 跳转路由
const router = useRouter();
const downloadUrl = ref("");
// 返回首页
const backToHome = () => {
  router.push("/home");
};

const getDownloadUrl = async () => {
  try {
    const res = await artGetDownload();
    downloadUrl.value = res.data.data;
    console.log("下载链接：", downloadUrl.value);
  } catch (error) {
    console.error("请求失败：", error);
  }
};

onMounted(() => {
  getDownloadUrl();
});
</script>

<template>
  <div class="download-container">
    <!-- 返回首页按钮 -->
    <div class="back-btn" @click="backToHome">返回首页</div>

    <!-- 下载内容 -->
    <div class="download-content">
      <div class="download-title">《藻类图谱数据库》软件安装方法</div>

      <div class="install-steps">
        <div class="step">
          <span class="step-number">1、</span>
          <span class="step-text">点击</span>
          <a :href="downloadUrl" class="download-link">下载链接</a>
          <span class="step-text">，安装</span>
        </div>

        <div class="step">
          <span class="step-number">2、</span>
          <span class="step-text"
            >下载完成后，打开下载的安装文件"SwxN.apk"，安装后运行程序，提示"没有数据库文件"</span
          >
        </div>

        <div class="step">
          <span class="step-number">3、</span>
          <span class="step-text"
            >软件自动完成下载，重启软件后，则可正常使用。</span
          >
        </div>

        <div class="warning">
          <span class="warning-title">温馨提示：</span>
          <span class="warning-text">
            因数据文件较大，只在WIFI环境下才可下载，且下载需要时间，一般在10到20分钟之间，视网速而定，请耐心等待。下载过程中在手机系统的状态栏中有下载进度，下载完成后即可启动软件正常使用。
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 下载内容样式 */
.download-container {
  width: 100%;
  min-height: 100vh;
  background-color: #ecf1fb;
  padding: 30px 50px;
  position: relative;
}

.back-btn {
  margin-bottom: 20px;
  color: #5277c3;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
}

.back-btn:hover {
  text-decoration: underline;
}

.download-content {
  max-width: 1600px;
  margin: 0 auto;
}

.download-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #333;
}

.install-steps {
  padding: 0 20px;
}

.step {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.step-number {
  font-weight: bold;
  color: #333;
}

.step-text {
  color: #333;
}

.download-link {
  color: #4e6ef2;
  text-decoration: none;
  font-weight: bold;
}

.download-link:hover {
  text-decoration: underline;
}

.warning {
  margin-top: 40px;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}

.warning-title {
  color: #f56c6c;
  font-weight: bold;
}

.warning-text {
  color: #f56c6c;
  line-height: 1.5;
}
</style>
